<!--
 * @Descripttion: 编辑视频
 * @Author: xiao li
 * @Date: 2020-09-28 15:24:24
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:14:22
-->

<template>
  <div class="lb-goods-edit">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="120px"
        class="sub-form"
      >
        <el-form-item label="视频名称" prop="title">
          <el-input
            type="text"
            v-model="subForm.title"
            placeholder="请输入视频名称"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="视频文件" prop="">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="subForm.url"
              placeholder="选择视频文件"
            />
            <lb-cover
              type="button"
              fileType="video"
              @selectedFiles="getVideo"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="视频文稿" prop="text">
          <lb-ueditor v-model="subForm.text" :destroy="true"></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <div class="space-lg"></div>
          <el-button type="primary" @click="submitInfo">{{
            $t('action.submit')
          }}</el-button>
          <el-button
            type="default"
            style="margin-left: 10px"
            @click="$router.back(-1)"
            >{{ $t('action.back') }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      navTitle: '',
      // 基本信息表单值
      subForm: {
        id: 0,
        class_id: 0,
        title: '',
        url: '',
        top: 0,
        text: ''
      },
      // 基本信息验证规则
      subFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入视频名称',
          trigger: 'blur'
        },
        text: {
          required: true,
          type: 'string',
          message: '请输入视频文稿',
          trigger: 'blur'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        }
      }
    }
  },
  async created () {
    let { id, class_id: cid } = this.$route.query
    this.subForm.id = id
    this.subForm.class_id = cid
    this.navTitle = this.$t(id ? 'menu.PayclassVideoEdit' : 'menu.PayclassVideoAdd')
    if (id) {
      await this.getGoodsInfo(id)
    }
  },
  methods: {
    getVideo (video) {
      this.subForm.url = video[video.length - 1].url
    },
    /**
     * @method 获取课程详情
     */
    async getGoodsInfo (id) {
      let { code, data } = await this.$api.payclassVideoInfo({ id })
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    /**
     * @method 提交课程信息
     */
    submitInfo () {
      let flag = true
      this.$refs['subForm'].validate(valid => {
        if (!valid) flag = false
      })
      if (flag) {
        let subForm = JSON.parse(JSON.stringify(this.subForm))
        let modelMethod = subForm.id ? 'payclassVideoUpdate' : 'payclassVideoAdd'
        this.$api[modelMethod](subForm).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t(subForm.id ? 'tips.successRev' : 'tips.successSub'))
            this.$router.back(-1)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.parmai_view {
  display: flex;
  flex-wrap: wrap;
}
.lb-goods-edit {
  width: 100%;
  padding-bottom: 0px;
  position: relative;
  .el-form {
    margin: 20px 0;
  }

  .sub-form {
    .el-input,
    .el-input-number,
    .el-cascader,
    .el-select {
      width: 300px;
    }
    .el-textarea {
      width: 600px;
    }
  }
  .add-form {
    margin-left: 180px;
    margin-bottom: 30px;
    width: 800px;
    .el-input,
    .el-input-number {
      width: 160px;
    }
  }

  .specs-info {
    width: 925px;
    margin: 20px 0;
    .el-input-number {
      width: 100px;
    }
    .specs-item {
      width: 100%;
      display: flex;
      margin: 24px 0;

      .item-label {
        color: #606266;
        width: 180px;
        min-width: 180px;
        line-height: 35px;
        padding-right: 12px;
        text-align: right;

        .require {
          color: #f56c6c;
        }
      }

      .item-label-table {
        line-height: 50px;
      }

      .item-value {
        width: 100%;

        .table-bot {
          width: 100%;
          display: flex;
          align-items: center;

          span {
            margin-right: 20px;
          }

          .el-link {
            margin: 0 20px 0 0;
          }
        }
      }

      .item-value-specs-name {
        margin-bottom: 16px;

        .el-button {
          margin-left: 20px;
        }
      }

      .el-tag {
        margin: 5px 10px 5px 0px;
      }

      .input-new-tag {
        width: 90px;
        margin: 5px 10px 5px 0px;
        height: 28px;
        vertical-align: bottom;

        .el-input__inner {
          height: 28px !important;
        }
      }
    }
  }
}

.dialog-inner {
  display: flex;
  justify-text: center;
  align-items: center;
  width: 100%;

  .el-input {
    width: 200px;
  }
}

.fiexd {
  height: 80px;
  position: fixed;
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(240, 240, 240) 1px -2px 8px;
  bottom: 0px;
  left: 300px;
  z-index: 5;
  display: flex;
  padding-left: 100px;
  align-items: center;
}
.flex-warp {
  display: flex;
  flex-wrap: wrap;
}
.spe-tag-img {
  // display: inline-block;
  margin: 10px 10px 0 0;
}
</style>
